<template>
  <div>
    <Header :title_='title_'></Header>

    <van-form v-model="userinfo">
      <van-field
        v-if="isshow"
        v-model="userinfo.username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />

      <van-field
        v-if="show"
        v-model="userinfo.password"
        name="password"
        label="原密码"
        placeholder="原密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-if="show"
        v-model="userinfo.passwordone"
        type="password"
        name="password"
        label="新密码"
        placeholder="新密码"
        :rules="[{ required: true, message: '请填写新密码' }]"
      />
      <div style="margin: 16px;">
        <van-button v-if="isshow" round block type="info" @click="forget()">找回</van-button>
      </div>
      <div style="margin: 16px;">
        <van-button v-if="show" round block type="info" @click="forr()">修改</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import Vue from "vue";
import { Form, Toast } from "vant";
import Header from "@/components/Header/Header";

Vue.use(Form);
Vue.use(Toast);
export default {
  data() {
    return {
      title_:'找回密码',

      userinfo: {
        username: "",
        password: "",
        passwordone: ""
      },
      isshow: true,
      show: false
    };
  },
  components: {
    Header,
  },
  methods: {
    forget() {
      if (this.userinfo.username == "") {
        alert("用户名或密码不能为空");
      } else {
        this.$axios.post("/api/forget", this.userinfo).then(
          res => {
            Toast.fail("找回成功");
            if (res.data.code == 0) {
              this.userinfo.password = res.data.data.password;
              this.show = true;
              this.isshow = false;
            }
          },
          error => {
            Toast.fail("没有此用户");
          }
        );
      }
    },
    forr() {
      this.$axios.post("/api/forgg", this.userinfo).then(res => {
        if(res.data.code==0){
            Toast.fail("修改密码成功");
          this.$router.push({path:'/login'})
        }
      },
      error=>{
          Toast.fail("用户密码重复");
      }
      );
    }
  }
};
</script>
<style lang="scss">
  html{
    font-size: 16px;
  }

</style>